<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="close-box" @click="closeIt('close')">
				<image class="close-icon" src="../../static/search/close.png" mode=""></image>
			</view>
			<view class="input-box">
				<input class="search-box-inp" type="text" placeholder-style="#8891a7" placeholder="请输入电影名"
				 v-model="keyword" />
			</view>
			<view class="btn-box" @click="closeIt('search')">
				搜索
			</view>
		</view>
		<!-- 热门搜索 -->
		<!-- <view class="hot-box">
			<view class="hot-title">
				热门搜索
			</view>
			<view class="hot-main">
				<view class="hot-word">
					python工程师速成教程
				</view>
				<view class="hot-word">
					速成教程
				</view>
				<view class="hot-word">
					python工程师教程
				</view>
				<view class="hot-word">
					程师速成教程
				</view>
				<view class="hot-word">
					python成教程
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				keyword: ''
			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			closeIt(obj) {
				if (obj == 'close') {
					uni.setStorageSync('search_flag', true);
					uni.setStorageSync('search_keyword', '');
					uni.navigateBack({
						delta: 1
					})
				}
				if (obj == 'search') {
					let keyword = this.keyword;
					console.log('存入缓存：'+keyword)
					uni.setStorageSync('search_flag', true);
					uni.setStorageSync('search_keyword', keyword);
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF !important;
	}

	.page {
		background-color: #FFFFFF !important;
		margin-top: var(--status-bar-height);
	}

	/**搜索框**/
	.search-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 96upx;
		width: 100%;
		background-color: #f6f6f6;
	}

	.search-box view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.close-box {
		padding: 0 10upx;
		width: 5%;
	}

	.input-box {
		width: 85%;
	}

	.btn-box {
		width: 10%;
		color: #2CC17B;
		padding: 0 10upx;
	}

	.close-icon {
		width: 34upx;
		height: 34upx;
	}

	.search-box-inp {
		flex: 1;
		height: 68upx;
		border: 1px solid #ddd;
		border-radius: 68upx;
		font-size: 28upx;
		padding: 0upx 30upx;
		background-color: #FFFFFF !important;
	}

	.hot-box {
		padding: 0 30upx;
	}

	.hot-title {
		height: 64upx;
		font-size: 30upx;
		color: #3c4a55;
		line-height: 64upx;
		padding-left: 15upx;
	}

	.hot-main {
		padding-top: 0upx;
	}

	.hot-word {
		float: left;
		display: inline;
		line-height: 100%;
		padding: 12upx 20upx;
		margin: 15upx 10upx;
		border-radius: 30upx;
		font-size: 30upx;
		color: #8891a7;
		border: 1px solid #E6EAF2;
	}
</style>
